<template>
    <div>
        <el-col :span="22" :offset="1">
            <el-card>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/hello' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>搜索</el-breadcrumb-item>
                </el-breadcrumb>
            </el-card>
            <div style="height: 20px;"/>
            <el-card>
                <!-- 搜索 -->
                <el-row>
                    <el-col :span="17" :offset="3">
                        <el-input placeholder="根据输入查找帖子" v-model="inputMsg" >
                            <el-button slot="append" icon="el-icon-search" @click="search"/>
                        </el-input>
                        <div style="height: 30px;"/>
                        <!-- 显示内容 -->
                        <div v-if="display" v-for="message in messageList">
                            <el-card class="myCard" @click.native="jump(message.id)" >



                                <p style="text-align: left;border-left: 10px;color: #545C64;font-size: 20px">
                                    {{message.title}}
                                </p>
                                <el-divider/>
                                <p style="text-align: left;border-left: 80px;">
                                    &nbsp;&nbsp;&nbsp;&nbsp;{{message.comment}}
                                </p>

                            </el-card>
                            <div style="height: 10px;"/>
                        </div>

                    </el-col>
                </el-row>
            </el-card>
        </el-col>
    </div>
</template>

<script>
    export default {
        name: "search",
        data(){
            return{
                display:false,
                inputMsg:'',
                messageList:[{}]
            }
        },
        methods:{
            jump(id){
              this.$router.push("/posts?id="+id);
            },
            search:function () {
                this.$axios
                    .get("/api/posts/fuzzyLookup",{
                        params:{
                            param:this.inputMsg,
                        }
                    })
                    .then(req=>{
                        this.messageList = req.data.data;
                        this.display = true;
                    })
            }
        }
    }
</script>

<style scoped>
    .myCard{

    }
</style>
